<template>
  <view class="file-download">
    <view class="file-name-box">
      <text class="ali-icon icon-article" style="font-size: 40rpx; color: #666664"></text>
      <text class="file-name">{{ fileName || '文件未命名' }}</text>
    </view>
    <text class="down-btn" @click="openDocument({ filePath: fileUrl, customFileName: fileName })">
      下载
    </text>
  </view>
</template>
<script setup lang="ts">
  import { useUpload } from '@/hooks/core/useUpload';

  defineProps({
    fileName: {
      type: String,
      default: '',
    },
    fileUrl: {
      type: String,
      default: '',
    },
  });

  const { openDocument } = useUpload();
</script>
<style lang="scss" scoped>
  .file-download {
    display: flex;
    align-items: center;
    gap: 36rpx;
    .file-name-box {
      display: flex;
      flex: 1;
      gap: 16rpx;
      align-items: center;
      padding: 16rpx 24rpx;
      background-color: #f2f3f5;
      border-radius: 8rpx;
      .file-name {
        color: #666664;
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
    .down-btn {
      color: #2878ff;
      font-size: 28rpx;
      line-height: 40rpx;
    }
  }
</style>
